<template>
	<view class="preview" v-if="currentInfo">
		<swiper circular="true" :current="currentIndex" @change="swiperChange">
			<swiper-item v-for="item in classList" :key="item._id">
				<image @click="maskchange" :src="item.picurl" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<!-- 遮罩层 -->
		<view class="mask" v-if="maskstate">
			<view class="goback" @click="goback" :style="{top:getStatusBarHeight()+'px'}">
				<uni-icons type="back" color="#fff" size="20"></uni-icons>
			</view>
			<view class="count">{{currentIndex+1}} / {{classList.length}}</view>
			<view class="time">
				<uni-dateformat :date="new Date()" format="hh:mm"></uni-dateformat>
			</view>
			<view class="date">
				<uni-dateformat :date="new Date()" format="MM月dd日"></uni-dateformat>
			</view>
			<view class="footer">
				<view class="box" @click="clickpop">
					<uni-icons type="info" size="28"></uni-icons>
					<view class="text">信息</view>
				</view>
				<view class="box" @click="clickScore">
					<uni-icons type="star" size="28"></uni-icons>
					<view class="text">{{currentInfo?.score}}分</view>
				</view>
				<view class="box" @click="clickDownload">
					<uni-icons type="download" size="28"></uni-icons>
					<view class="text">下载</view>
				</view>
			</view>
		</view>
		
		<!-- 图片信息弹窗 -->
		<uni-popup ref="infoPopup" type="bottom">
			<view class="infopopup">
				<view class="popheader">
					<view></view>
					<view class="title">壁纸信息</view>
					<view class="close" @click="clickInfoClose">
						<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
					</view>
				</view>
				<scroll-view scroll-y="ture">
					<view class="content">
						<view class="row">
							<view class="label">壁纸ID：</view>
							<text selectable="true" class="value">{{currentInfo?.classid || '未知ID'}}</text>
						</view>
						<!-- <view class="row">
							<view class="label">分类：</view>
							<text class="value class">明星美女</text>
						</view> -->
						<view class="row">
							<view class="label">发布者：</view>
							<text class="value">{{currentInfo?.nickname}}</text>
						</view>
						<view class="row">
							<view class="label">评分：</view>
							<view class="value rotebox">
								<uni-rate readonly="true" touchable="false" :value="currentInfo?.score" size="16"/>
								<text class="score">{{currentInfo?.score}}</text>
							</view>
						</view>
						<view class="row">
							<view class="label">摘要：</view>
							<text class="value">
								{{currentInfo?.description}}
							</text>
						</view>
						<view class="row">
							<view class="label">标签：</view>
							<view class="value tabs">
								<view class="tab" v-for="tab in currentInfo?.tabs" :key="tab">{{tab}}</view>
							</view>
						</view>
					
						<view class="copyright">
							声明：此图为小珠猪所找，别乱下呦~~~
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		
		<!-- 图片评分弹窗 -->
		<uni-popup ref="scorePopup" :is-mask-click="false">
			<view class="scorePopup">
				<view class="popheader">
					<view></view>
					<view class="title">壁纸评分</view>
					<view class="close" @click="clickScoreClose">
						<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
					</view>
				</view>
				<view class="content">
					<uni-rate v-model="userScore" allowHalf="true"/>
					<text class="text">{{userScore}}分</text>
				</view>
				
				<view class="footer">
					<button @click="submitScore" :disabled="!userScore" type="default" size="mini" plain="true">确认评分</button>
				</view>
			</view>
		</uni-popup>
	</view>

</template>

<script setup>
import { ref } from 'vue';
import { getStatusBarHeight } from '@/utils/system.js';
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import { apiGetSetScore, apiWriteDownLoad, apiDetailWall } from '@/api/apis';

// 从缓存中获取 storageClassList
const storageClassList = uni.getStorageSync("storageClassList");

	// 确保 storageClassList 是一个数组
	const classList = ref([]);
	if (Array.isArray(storageClassList)) {
		classList.value = storageClassList.map(item => {
			return {
				...item,
				picurl: item.smallPicurl.replace("_small.webp", ".jpg")
			};
		});
	} else {
		// 如果不是数组，初始化为空数组
		classList.value = [];
	}

	// 获取索引, 图片信息
	const currentid = ref(null);
	const currentIndex = ref(0);
	const currentInfo = ref(null);

	onLoad(async (e) => {
		currentid.value = e.id;
		if (e.type === 'share') {
			let res = await apiDetailWall({ id: currentid.value });
			classList.value = res.data.data.map(item => {
				return {
					...item,
					picurl: item.smallPicurl.replace("_small.webp", ".jpg")
				};
			});
		}
		currentIndex.value = classList.value.findIndex(item => item._id === currentid.value);
		currentInfo.value = classList.value[currentIndex.value] || {};
	});

	// 左右翻图时修改信息
	const swiperChange = (e) => {
		currentIndex.value = e.detail.current;
		currentInfo.value = classList.value[currentIndex.value] || {};
	};

	// 遮罩层状态
	const maskstate = ref(true);
	const maskchange = () => {
		maskstate.value = !maskstate.value;
	};

	// 点击弹窗
	const infoPopup = ref(null);
	const clickpop = () => {
		infoPopup.value.open();
	};

	// 点击关闭弹窗
	const clickInfoClose = () => {
		infoPopup.value.close();
	};

	// 点击评分弹窗
	const scorePopup = ref(null);
	const userScore = ref(0);

	const clickScore = () => {
		scorePopup.value.open();
	};

	// 点击关闭评分弹窗
	const clickScoreClose = () => {
		scorePopup.value.close();
		userScore.value = 0;
	};

	// 确认评分
	const submitScore = async () => {
		let { classid, _id: wallId } = currentInfo.value;
		let res = await apiGetSetScore({
			classid,
			wallId,
			userScore: userScore.value
		});
		console.log(res);
		if (res.data.errCode === 0) {
			uni.showToast({
				title: "评分成功",
				icon: "none"
			});
			clickScoreClose();
		}
	};

	// 返回上一页
	const goback = () => {
		uni.navigateBack({
			success: () => {},
			fail: () => {
				uni.reLaunch({
					url: "/pages/classify/classify"
				});
			}
		});
	};

	// 点击下载
	const clickDownload = async () => {
		// #ifdef H5
		uni.showModal({
			content: "请长按保存壁纸",
			showCancel: false
		});
		// #endif

		// #ifndef H5
		uni.showLoading({
			title: "下载中...",
			mask: true
		});
		let { classid, _id: wallId } = currentInfo.value;
		let res = await apiWriteDownLoad({
			classid,
			wallId
		});
		console.log(res);
		uni.getImageInfo({
			src: currentInfo.value.picurl,
			success: (res) => {
				uni.saveImageToPhotosAlbum({
					filePath: res.path,
					success: () => {
						uni.showToast({
							title: "保存成功，请到相册查看",
							icon: "none"
						});
					},
					fail: (err) => {
						if (err.errMsg === 'saveImageToPhotosAlbum:fail cancel') {
							uni.showToast({
								title: "保存失败，请点击重新下载",
								icon: "none"
							});
							return;
						}
						uni.showModal({
							title: "提示",
							content: "需要授权保存到相册",
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success: (res) => {
											if (res.authSetting['scope.writePhotosAlbum']) {
												uni.showToast({
													title: "获取授权成功",
													icon: "none"
												});
											} else {
												uni.showToast({
													title: "获取授权失败",
													icon: "none"
												});
											}
										}
									});
								}
							}
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			}
		});
		// #endif
	};

	// 分享给好友
	onShareAppMessage((e) => {
		return {
			title: "琨琨壁纸",
			path: "/pages/preview/preview?id=" + currentid.value + "&type=share"
		};
	});

	// 分享到朋友圈
	onShareTimeline(() => {
		return {
			title: "琨琨壁纸",
			query: "id=" + currentid.value + "&type=share"
		};
	});

</script>

<style lang="scss" scoped>
	.preview{
		width: 100%;
		height: 100vh;
		position: relative;
		swiper{
			width: 100%;
			height: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
		//遮罩层
		.mask{
			&>view{
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				width: fit-content;
				color: white;
			}
			.goback{
				width: 38px;
				height: 38px;
				background: rgba(0, 0, 0, 0.5);
				left: 30rpx;
				top: 0;
				margin-left: 30rpx;
				border:1rpx solid rgba(255, 255, 255, 0.3);
				border-radius: 100rpx;
				backdrop-filter: blur(10rpx);
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.count{
				top:10vh;
				background: rgba(0, 0, 0, 0.3);
				backdrop-filter: blur(10rpx);
				font-size: 28rpx;
				border-radius: 100%;
				padding: 8rpx 28rpx;
				
			}
			.time{
				font-size: 140rpx;
				top: calc(10vh + 80rpx);
				font-weight: 100;
				line-height: 1em;
				text-shadow: 0 4rpx rgba(0,0,0,0.3);
			}
			.date{
				font-size: 34rpx;
				top: calc(10vh + 230rpx);
				text-shadow: 0 2rpx rgba(0,0,0,0.3);
			}
			.footer{
				background: rgba(255, 255, 255, 0.8);
				bottom: 10vh;
				width: 65vw;
				height: 120rpx;
				border-radius: 120rpx;
				color: #000;
				display: flex;
				justify-content: space-around;
				align-items: center;
				box-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.1);
				backdrop-filter: blur(20rpx);
				.box{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					border: 2rpx 12rpx;
					.text{
						font-size: 26rpx;
						color: $text-font-color-2;
					}
				}
			}
		}
	}
		.popheader{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.title{
				color: $text-font-color-2;
				font-size: 26rpx;
			}
			.close{
				padding: 6rpx;
			}
		}
		//详细信息
		.infopopup{
			background: #fff;
			padding: 30rpx;
			border-radius: 30rpx 30rpx 0 0;
			overflow: hidden;
			scroll-view{
				max-height:  60vh;
				.content{
					.row{
						display: flex;
						padding: 16rpx 0;
						font-size: 32rpx;
						line-height: 1.7em;
						.label{
							color: $text-font-color-3;
							width: 140rpx;
							text-align: right;
							font-size: 30rpx;
						}
						.value{
							flex: 1;
							width: 0;
						}
						.class{
							color: $brand-theme-ccolor;
						}
						.rotebox{
							display: flex;
							align-items: center;
							.score{
								font-size: 26rpx;
								color: $text-font-color-2;
								padding-left: 10rpx;
							}
						}
						.tabs{
							display: flex;
							flex-wrap: wrap;
							.tab{
								border: 1px solid $brand-theme-ccolor;
								color: $brand-theme-ccolor;
								font-size: 22rpx;
								padding: 10rpx 30rpx;
								border-radius: 40rpx;
								line-height: 1em;
								margin: 0 10rpx 10rpx 0;
							}
						}
					}
					.copyright{
						font-size: 28rpx;
						padding: 20rpx;
						background: #F6F6F6;
						color: #666;
						border-radius: 10rpx;
						margin: 20rpx 0;
						line-height: 1.6em;
					}
				}
			}
		}
	       
		//评分
		.scorePopup{
			background: #fff;
			padding: 30rpx;
			width: 70vw;
			border-radius: 30rpx;
			.content{
				padding: 30rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				.text{
					color: #ffca3e;
					padding-left: 10rpx;
					width: 80rpx;
					line-height: 1em;
					text-align: right;
				}
			}
			.footer{
				padding: 10rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
</style>
